// 引入提示消息的 element ui 组件
import { Message } from 'element-ui'
import stroe from '@/store'
import router from '@/router'
const stamp = 2 * 60 * 60 * 1000
// 1、引入axios(基于axios封装)
import axios from 'axios'
import { getTimeStamp } from './auth'
import store from '@/store'
// 2、创建请求实例
const service = axios.create({
  // 当执行 npm run dev  ==> .env.development ==> /api ==> 触发跨域代理
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10 * 1000
})
// 3、配置拦截器：请求拦截器 + 响应拦截器
service.interceptors.request.use(config => {
  // config 是请求配置的信息
  // 注入token
  if (stroe.getters.token) {
    // 给config 添加 headers属性
    // config.headers['Authorization']

    // 判断 token是否超时  当前时间 - 记录时间 > 自定义时间长度
    if (isCheckTimeOut()) {
      // 1.清空token
      store.dispatch('user/logout')
      // 2.跳转页面
      router.push('/login')
      // 3.提示用户
      return Promise.reject(new Error('token超时了'))
    }
    config.headers.Authorization = `Bearer ${stroe.getters.token}`
  }
  return config // 无论什么时候必须要return 回去 如果不返回 它会认为你没有配置信息
}, error => {
  // 返回一个失败的状态 这个时候就相当于后台接口报错了 那么会进入响应拦截器进行 响应的提示
  return Promise.reject(error)
})
// 配置成功和失败的两个方法
service.interceptors.response.use(res => {
  // axios默认会添加一层data 所以是从res.data里面解构的
  const { success, message, data } = res.data
  // 判断业务是否处理成功
  if (success) {
    // 如果成功 返回数据
    return data
  } else {
    // 如果处理失败 提示错误信息 返回错误对象(promise)
    Message.error(message)
    return Promise.reject(new Error(message))
  }
}, err => {
  if (err?.response?.data?.code === 10002) {
    // 超时
    store.dispatch('user/logout')
    router.push('/login')
  } else {
    Message.error(err.message)
  }
  return Promise.reject(err)
})

function isCheckTimeOut() {
  // 判断 token是否超时  当前时间 - 记录时间 > 自定义时间长度
  var currentTime = Date.now()
  var timeStamp = getTimeStamp()
  return currentTime - timeStamp > stamp
}

// 4、导出创建的实例
export default service
